<template>
	<view class="index_box">
		<view class="no_data_box" v-if="indexList.length<=0&&!loading">
			<u-empty text="暂时无任务" mode="list"></u-empty>
		</view>
		<view v-else v-for="(item, index) in indexList" :key="index" class="index_item_box">
			<view class="item" @click="goDetail(item)">
				<view class="image">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="status_and_text">
					<!-- 这里后期根据业务逻辑判断 -->
					<view v-if="item.is_user == 1"
						:class="{'pass':item.user_status == 1,'refuse': item.user_status == 2,'status_view':true}">
						{{item.user_status == 1 ? '已报名' : (item.user_status == 2 ? '未通过' : '申请中')}}
					</view>
					<view class="title">{{ item.name }}</view>
				</view>
				<view class="sa">
					<view class="sa-1">
						<image src="@/static/02.png"></image>
						<text>{{ item.start_end }}</text>
					</view>
					<view class="sa-1">
						<image src="@/static/01.png"></image>
						<text v-if='item.num > 0'>{{ item.ok_num }}/{{ item.num }}人</text>
						<text v-else>无限制</text>
					</view>
				</view>
				<view :class="{'tags':item.tag_text&&item.tag_text.length}">
					<text v-for="(v, i) in item.tag_text" :key="i">{{ v }}</text>
				</view>
			</view>
		</view>
		<!-- <my-tabbar :act="0"></my-tabbar> -->
	</view>
</template>

<script>
	// import myTabbar from '@/components/myTabbar.vue';
	export default {
		// components: {
		// 	myTabbar
		// },
		data() {
			return {
				indexList: [],
				page: 1,
				loading: true
			}
		},
		onShow() {
			uni.showLoading({
				title: '任务加载中...'
			});
			this.loadmore()
		},
		onPullDownRefresh() {
			this.loadmore();
		},
		methods: {
			scrolltolower() {
				// this.loadmore()
			},
			loadmore() {
				let that = this
				that.$API.getTaskList({
					page: that.page
				}).then(res => {
					if (that.page == 1) {
						that.indexList = [];
					}
					res.data.forEach(v => {
						that.indexList.push(v)
					});
					uni.hideLoading();
					this.loading = false
				}).catch(err => {
					console.log('err', err)
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.index_box {
		width: 100%;
		height: auto;
		overflow: hidden;

		.no_data_box {
			width: 100vw;
			height: calc(100vh - 172rpx);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.index_item_box {
			width: 100%;
			padding: 0 24rpx 24rpx 24rpx;
			box-sizing: border-box;

			.item {
				width: 100%;
				height: auto;
				display: flex;
				flex-direction: column;
				padding: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				box-sizing: border-box;
				overflow: hidden;

				.image {
					width: 100%;
					height: auto;

					image {
						// aspect-ratio: 3/2;
						width: 100%;
						max-height: 308rpx;
					}
				}

				.status_and_text {
					width: 100%;
					height: auto;
					overflow: hidden;
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					gap: 0 16rpx;

					.status_view {
						min-width: 72rpx;
						padding: 6rpx 16rpx;
						background: #3037D6;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-weight: 300;
						color: #FFFFFF;
					}

					.pass {
						background: #17B87E;
					}

					.refuse {
						background: #D67630;
					}

					.title {
						width: inherit;
						height: 56rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: #000000;
						line-height: 56rpx;
						-webkit-background-clip: text;
						-webkit-text-fill-color: #000;
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						display: inline-block;
						white-space: nowrap;
					}
				}

				.sa {
					height: 56rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-top: 16rpx;
					padding-bottom: 12rpx;

					.sa-1 {
						display: flex;
						flex-direction: row;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
							margin-right: 12rpx;
						}

						text {
							height: 56rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #1ABEAB;
							line-height: 56rpx;
						}
					}
				}

				.tags {
					width: 100%;
					height: auto;
					display: flex;
					flex-wrap: wrap;
					overflow: hidden;
					flex-direction: row;
					align-items: center;
					border-top: 2rpx solid #ECECEC;
					padding-top: 24rpx;
					gap: 10rpx 10rpx;

					text {
						color: #30D6C2;
						padding: 8rpx 16rpx;
						border: 2rpx solid #30D6C2;
						border-radius: 6rpx;
						font-size: 24rpx;
					}
				}
			}
		}

		.index_item_box:first-child {
			padding-top: 24rpx;
		}
	}
</style>